<template lang="html">

  <section class="money">
    <Header>
      <mu-icon value="arrow_back" slot="left" @touchend="back"></mu-icon>
      <span class="arrow" slot="title">投资理财</span>
    </Header>
    <ProductList v-for="item in list" :key="item.id" :data="item"></ProductList>
    <div class="load-more" @touchend="showMore" v-if="others.length">
      <span>点击查看更多</span>
    </div>
    <div class="load-more1" v-else>
      <span>暂时没有数据了</span>
    </div>
    <mu-tabs :value="$route.path" center color="teal">
			<mu-tab value="/index" to="/index">
				<mu-icon value="home"></mu-icon>
				首页
			</mu-tab>
			<mu-tab value="/money" to="/money">
				<mu-icon value="local_atm"></mu-icon>
				投资理财
			</mu-tab>
			<mu-tab value="/order" to="/order">
				<mu-icon value="favorite"></mu-icon>
				投资预约
			</mu-tab>
			<mu-tab value="/my" to="/my">
				<mu-icon value="person_pin"></mu-icon>
				我的
			</mu-tab>
		</mu-tabs>
    <mu-container data-mu-loading-color="secondary" data-mu-loading-overlay-color="rgba(0, 0, 0, .7)" v-loading="loading2" class="demo-loading-wrap">
    </mu-container>
  </section>

</template>

<script lang="js">
  //引入头文件
  import Header from "../components/Header.vue";
  //引入列表组件
  import ProductList from "../components/ProductList.vue"
  //定义加载过程
  let loading;
  export default  {
    //注册组件
    components: { Header, ProductList },
    name: 'money',
    props: [],
    mounted () {

    },
    data () {
      return {
        //显示列表数据
        list: [],
        //存储列表数据
        others: [],
        //加载全局的状态
        loading2: false
      }
    },
    //组件创建完成
    created() {
      this.$http
      .post('/api/product/list')
      //数据监听
      .then(({ data }) => {
        //截取前5个
        this.list = data.data.slice(0, 5);
        //存储剩余的数据
        this.others = data.data.slice(5);
      })
      .catch(err=>{console.log(err)})
      //全局加载
       loading = this.$loading();
        
    },
    methods: {
      //显示更多数据
      showMore() {
        //点击添加
        this.list = this.list.concat(this.others.slice(0, 5));
        this.others = this.others.slice(5);
      },
      // 后退
      back() {
        this.$router.go(-1);
      },
    },
    computed: {

    },
    //数据监听
    watch: {
      list(arr) {
        if(arr.length > 0) {
          loading.close();
        }
      }
    }
}


</script>

<style scoped lang="scss">
  .money {
    margin-bottom: 100px;
    .header {
      position: relative;
      .mu-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      span {
        display: block;
        text-align: center;
      }
    }
    .load-more {
      color: rgb(67, 160, 71);
      text-align: center;
      height: 50px;
      line-height: 50px;
      font-size: 20px;
      font-weight: 500;
    }
    .load-more1 {
      margin: 10px 32px;
      background-color: #ccc;
      text-align: center;
      line-height: 50px;
      height: 50px;
      font-size: 18px;
      color: rgb(0, 0, 0, 0.3)
    }
    .mu-tabs-center {
		// display: flex;
		position: fixed !important;
		bottom: 0;left: 0;
		justify-content: space-evenly !important;
	}
  }
</style>
